<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.

Copyright (c) 2023-present Kaleidos INC
-->

<ng-container *transloco="let t">
  <div
    *ngIf="!editComment"
    [@.disabled]="!comment.deletedBy">
    <div
      class="comment"
      data-test="comment"
      *ngIf="!comment.deletedBy; else commentIsDeleted"
      @fadeInOut>
      <div class="comment-top">
        <div
          class="creation-info"
          [class.no-user]="!comment.createdBy">
          <ng-container *ngIf="comment.createdBy">
            <tg-user-avatar
              size="m"
              class="no-border"
              [user]="comment.createdBy"
              [color]="comment.createdBy.color"
              type="light"
              [rounded]="true"
              aria-hidden="true"></tg-user-avatar>
          </ng-container>

          <tg-nouser-avatar
            *ngIf="!comment.createdBy"
            class="former-user-avatar"></tg-nouser-avatar>

          <div class="creation-data">
            <ng-container *ngIf="comment.createdBy">
              <span class="creation-data-fullname">
                {{ comment.createdBy.fullName }}
              </span>
              <span class="creation-data-username">
                @{{ comment.createdBy.username }}
              </span>
            </ng-container>
            <span
              *ngIf="!comment.createdBy"
              class="former-user-text"
              >{{ t('commons.former_user') }}</span
            >
            <span class="separator">∙</span>
            <div class="end-wrapper">
              <span
                *ngIf="comment.createdAt"
                [title]="comment.createdAt | date: 'medium'"
                class="creation-data-date">
                <tg-real-time-date-distance
                  [date]="comment.createdAt"></tg-real-time-date-distance>
              </span>
              <ng-container *ngIf="comment.modifiedAt">
                <tg-ui-badge
                  data-test="comment-edited"
                  class="creation-data-edited"
                  [label]="t('comments.edit.edited_comment')"
                  [tgUiTooltip]="
                    t('comments.edit.edited_comment_tooltip', {
                      when: comment.modifiedAt | dateDistance
                    })
                  "
                  tgUiTooltipPosition="top-right"
                  size="s"
                  color="gray"></tg-ui-badge>
              </ng-container>
            </div>
          </div>
        </div>
        <div class="comment-options">
          <tg-comment-detail
            [comment]="comment"
            [canComment]="canComment"
            [user]="user"
            (deleteComment)="onDeleteComment()"
            (displayEditComment)="displayEditComment($event)"
            (highlightComment)="onHighlightComment($event)"></tg-comment-detail>
        </div>
      </div>

      <div class="comment-content">
        <div
          tgCodeHightlight
          class="description-content"
          [innerHTML]="comment.text | safeHtml"></div>
      </div>
    </div>
    <ng-template #commentIsDeleted>
      <tg-deleted-comment
        @fadeInOut
        [@.disabled]="!isDeleted"
        [comment]="comment"
        [user]="user"></tg-deleted-comment>
    </ng-template>
  </div>

  <ng-container *ngIf="editComment && comment.createdBy">
    <div class="edit-comment-wrapper">
      <tg-user-avatar
        size="m"
        class="no-border"
        [user]="comment.createdBy"
        [color]="comment.createdBy.color"
        type="light"
        [rounded]="true"
        aria-hidden="true"></tg-user-avatar>
      <form
        class="edit-comment-form"
        [formGroup]="editCommentForm"
        (ngSubmit)="saveEdit()">
        <tg-editor
          data-test="comment-editor"
          [attr.id]="comment.id"
          [id]="comment.id"
          [field]="editCommentForm.get('comment')!.value"
          (contentChange)="onContentChange($event)"
          [toolbar]="commentsToolbar"
          (editorReady)="onInitEditor()"></tg-editor>
        <div
          class="edit-field-actions"
          *ngIf="editorReady">
          <button
            data-test="edit-cancel"
            (click)="cancelEditComment()"
            tuiButton
            type="button"
            appearance="tertiary">
            {{ t('commons.cancel') }}
          </button>

          <tui-hosted-dropdown
            [tuiDropdownAlign]="'right'"
            [tuiDropdownDirection]="'bottom'"
            [content]="confirmDeleteTpl"
            [(open)]="confirmDelete">
            <button
              data-test="edit-save"
              tuiButton
              type="submit"
              appearance="primary">
              {{ t('commons.save') }}
            </button>
          </tui-hosted-dropdown>
        </div>
      </form>
    </div>

    <ng-template #confirmDeleteTpl>
      <div
        aria-labelledby="delete-comment-confirm"
        aria-describedby="delete-comment-description"
        aria-modal="true"
        class="delete-comment-confirm">
        <div class="confirm-container">
          <h3
            id="delete-comment-confirm"
            class="delete-comment-confirm-title"
            data-test="delete-comment-confirm-title">
            {{ t('comments.delete.confirm') }}
          </h3>
          <p
            class="delete-comment-description"
            id="delete-comment-description">
            {{ t('comments.delete.confirm_info') }}
          </p>
        </div>
        <div class="delete-comment-confirm-actions-area">
          <button
            appearance="button-form"
            data-test="delete-comment-cancel-button"
            tuiButton
            tuiAutoFocus
            (click)="displayConfirmDeleteComment(false)"
            type="button">
            {{ t('comments.delete.cancel') }}
          </button>
          <button
            data-test="delete-comment-confirm-button"
            appearance="destructive"
            tuiButton
            icon="trash"
            (click)="onDeleteComment()"
            type="button">
            {{ t('comments.delete.confirm_action') }}
          </button>
        </div>
      </div>
    </ng-template>
    <tg-discard-changes-modal
      [open]="showConfirmEditCommentModal"
      (discard)="discard$.next(true)"
      (cancel)="discard$.next(false)"></tg-discard-changes-modal>
  </ng-container>
</ng-container>
